/*
 * red page
**/
<template>
<div>
	<div class="main-box">
	  <img :src="elem.img" alt="" class="rd-img"/>
	  <div class="rd-conner">
	  	<p class="rd-cname">{{elem.cname}}</p>
	  	<h1 class="rd-title">{{elem.title}}</h1>
	  	<p class="rd-desc">{{elem.sub_title}}</p>
	  	<div class="rd-item" v-for="el in elem.desc">
	  		<p class="rd-title">{{el.title}}</p>
	  		<p class="rd-desc" v-html="reinput(el.content)"></p>
	  	</div>
	  </div>
	</div>
	<div class="quick-footernav"><span class="btn ui-btn" @click="backBtn">返回首页</span><a target="_blank" class="btn ui-btn red" @click.stop="golink" v-if="elem.link" :href="elem.link">直达链接</a></div>
	<modal-dialog ref="dialog"></modal-dialog>
</div>
</template>
<script>
import {getRedPackInfo, redPackRecord} from 'src/service/getData'
import Clipboard from 'clipboard'
import modalDialog from 'src/components/dialog'
export default {
  data () {
    return {
      elem: {},
      copylink: ''
    }
  },
  mounted () {
    let query = this.$route.query
    this.initData(query.tid)
    setTimeout(() => {
      this.bindCopy(this.copylink)
    }, 500)
  },
  components: {
    modalDialog
    // 'clipboard': () => import('clipboard')
  },
  computed: {
  },
  methods: {
    async initData (tid) {
      let res = await getRedPackInfo(tid)
      if (res.code !== 0) return
      this.elem = res.data.item
      console.log(res.data.item)
    },
    bindCopy (_token) {
      let that = this
      var btn = document.getElementById('copyEventBtn')
      if (!btn) return
      let clipboard = new Clipboard(btn, {
        text () {
          return _token
        }
      })
      clipboard.on('success', function (e) {
        that.$refs.dialog.confirm('<h3>复制成功</h3>', {
          type: 'tips',
          okText: '好的'
        })
      })
      clipboard.on('error', function (e) {
        that.$refs.dialog.confirm('<h3>复制失败，请手动长按复制</h3>', {
          type: 'tips',
          okText: '好的'
        })
      })
    },
    golink () {
      redPackRecord(this.elem.tid, 1)
    },
    reinput (str) {
      var that = this
      return str.replace(/<input(.*(copy-area-module).*?)>/, function (a) {
        let _link = a.match(/(.*)data-conent="([^"]*)"/)[2]
        if (_link) that.copylink = _link
        return '<p class="copy-span" style="-webkit-user-select:auto;">' + _link + '</p><a class="copy-btn" id="copyEventBtn">一键复制</a>'
      })
    },
    backBtn () { // 配合scrollBehaviour 点击返回首页模拟物理返回键，避免路由切换不记录滚动位置
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
.main-box{font-size:0.14rem;color: #666;background: #fff;padding-bottom:1rem;}
.rd-img{display: block;width:100%;max-height:3rem;}
.rd-conner{padding:0 0.2rem;-webkit-user-select:auto;}
.rd-cname{font-size:0.13rem;color: #999;}
.rd-title{font-size: 0.16rem;color: #333;}
.rd-desc{font-size: 0.16rem;color: #ff602a;}
.rd-item{border-top:0.05rem solid #CFCFCF;margin-top: 0.1rem;padding: 0.1rem 0;}
.rd-item .rd-title{border-left:4px solid #ffa200;line-height: 0.2rem;text-indent: 0.5em;font-size:0.14rem;}
.rd-item .rd-desc{color: #666; padding-top: 0.1rem;font-size:0.14rem;}
.quick-footernav{background: #fff;}
.quick-footernav .btn{margin: 0 0.2rem;}
.quick-footernav .btn.red{background: #ff602a;}
</style>
<style type="text/css">
  .rd-desc img{max-width:100%;}
  .copy-span{background: #666; color: #fff; padding: 0.1rem 0.05rem; text-align: center;word-break: break-all;}
  .copy-btn{display: block; text-align: center; background: #ff602a; color: #fff; border-radius: 6px; margin: 0.1rem auto; line-height: 0.3rem;position:relative;z-index:99;}
</style>
